<template>
	<uni-nav-bar
		v-if="!isWxBrowser"
		title="西湖一号丝巾选品平台"
		height="100rpx"
		:fixed="navBarFixed"
	/>
	<view class="show-content">
		<view class="show-top-list">
			<img class="logo-info" src="../../static/common/logo.png" />
			<view class="right-form-info">
				<f-searchBar
					@searchSuccess="searchSuccess"
					@focusInput="focusInput"
					@searchClicked="searchClicked"
				/>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="show-swiper">
			<img src="../../static/common/banner.png" />
		</view>
		<!-- 新款上新 和 热门推荐 快捷入口 -->
		<view class="show-quick-menu">
			<view class="item-menu-detial" @click="goToNewArrival">
				<view class="menu-title">新款上新</view>
				<view class="menu-icon">
					<img class="logo-info" src="../../static/common/new.png" />
				</view>
			</view>
			<view class="item-menu-detial" @click="goToHot">
				<view class="menu-title">热门推荐</view>
				<view class="menu-icon">
					<img class="logo-info" src="../../static/common/hot.png" />
				</view>
			</view>
		</view>
		<!-- 线上选品 -->
		<view class="online-product-selection" :style="{ top: isWxBrowser ? '132rpx' : '230rpx' }">
			<view class="selection-title">线上选品</view>
			<view class="filter-command">
				<f-filter-command-drawer @getFilterData="getFilterData" @changeDrawer="changeDrawer" />
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-container-list">
			<f-scroll-list
				v-if="!isShowTouristFlag"
				:status="loadMore.status"
				:showIcon="loadMore.showIcon"
				:color="loadMore.color"
				:contentText="loadMore.contentText"
				:useLoadMore="list.length > 0 ? true : false"
			>
				<f-common-singleGoods-card2 :data="list" @getCurrentItem="getCurrentItem" />
			</f-scroll-list>

			<!-- 试用用户只能查看50条数据 -->
			<f-common-singleGoods-card2
				v-else
				:data="showTouristDataList"
				@getCurrentItem="getCurrentItem"
			/>
		</view>
	</view>
	<!-- 找相似 -->
	<f-search-find-similarities ref="findSimilarities" />
</template>

<script setup>
	import { computed, ref, toRaw, reactive } from 'vue';
	import { useRoute, useRouter } from 'vue-router';
	import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	import _ from 'lodash';
	import searchApi from './../../sheep/api/search.js';
	import showIndexApi from './../../sheep/api/showIndex.js';
	import $store from '@/sheep/store';

	const loadMore = reactive({
		status: '',
		showIcon: true,
		color: '',
		contentText: {},
	});

	const list = ref([]);
	//试用用户
	const showTouristDataList = ref([]); //试用用户能查看的商品列表
	const isShowTouristFlag = ref(false); //是否展示试用用户列表
	const isWxBrowser = computed(() => sheep.$store('app').isWxBrowser); //代码运行环境
	const navBarFixed = ref(true);
	/**
	 * onLoad生命周期，首次加载会触发
	 */
	onShow(() => {
		initPage();
	});
	const getTouristDataList = () => {
		showIndexApi
			.getShowIndexGoodsList({
				pageNumber: 1,
				pageSize: 50,
			})
			.then((res) => {
				showTouristDataList.value = res.data.records;
			});
	};
	const focusInput = () => {
		sheep.$router.go('/pages/index/search');
	};
	// 搜索按钮  点击事件
	const searchClicked = () => {
		sheep.$router.go('/pages/index/search');
	};
	const findSimilarities = ref(null);
	const searchSuccess = (val) => {
		findSimilarities.value.openDialog(val);
	};
	const pageIndex = ref(1);
	const total = ref(0);
	const filterData = ref({});
	const filterFlag = ref('0'); //0： 直接下拉查询  1：点击了筛选面板的确定按钮
	/**
	 * 筛选抽屉确定事件
	 */
	const getFilterData = (info) => {
		filterData.value = { ...info };
		filterFlag.value = '1';
		pageIndex.value = 1; //每次点击筛选面板中的搜索按钮，将分页参数为 1
		let data = {
			pageNumber: pageIndex.value,
			pageSize: 10,
			special: false,
			publicNewSelection: false,
			styles: info.styleType,
			genders: info.genderList,
			festivals: info.holidayTheme,
			hues: info.colorSystem,
			printTypes: info.fabricSize,
		};
		getDataList(data);
	};

	const getDataList = (data) => {
		console.log('requestData=====>>', data);
		showIndexApi
			.getShowIndexGoodsList(data)
			.then((res) => {
				if (data.pageNumber === 1) {
					//不需要将新数据合并到原列表的情况，即 下拉和每次点击筛选面板的确认按钮时
					// 当接口返回的数据为空时,仍然不会置空页面,给出弹窗提示即可
					if (res.data.records.length > 0) {
						list.value = res.data.records;
						total.value = res.data.total;
					} else {
						return uni.showToast({
							title: '暂未查询到相关数据',
							icon: 'none',
						});
					}
				} else {
					//需要将新数据合并到原列表的情况
					if (res.data.records.length > 0) {
						list.value = _.concat(list.value, res.data.records);
						total.value = res.data.total;
					} else {
						return uni.showToast({
							title: '暂未查询到相关数据',
							icon: 'none',
						});
					}
				}
				if (total.value === res.data.total) {
					loadMore.status = 'no-more';
				}
			})
			.catch((error) => {
				console.log(error);
			});
	};
	const getCurrentItem = (item) => {
		sheep.$router.go('/pages/index/goodsDetail', { id: item.id });
	};
	const goToNewArrival = () => {
		sheep.$router.go('/pages/index/newArrival');
	};
	const goToHot = () => {
		sheep.$router.go('/pages/index/hot');
	};
	/**
	 * reachBottom 触底事件
	 */
	onReachBottom(() => {
		loadMore.status = 'loading';
		pageIndex.value += 1;
		if (list.value.length !== total.value) {
			loadMore.status = 'more';
			//1：直接下拉查询 2：根据输入框搜索按钮查询结果下拉
			let data = {
				pageNumber: pageIndex.value,
				pageSize: 20,
			};
			let data2 = {
				pageNumber: pageIndex.value,
				pageSize: 20,
				special: false,
				publicNewSelection: false,
				styles: filterData.value.styleType,
				genders: filterData.value.genderList,
				festivals: filterData.value.holidayTheme,
				hues: filterData.value.colorSystem,
				printTypes: filterData.value.fabricSize,
			};
			// 直接下拉查询，还是点击了筛选面板中的确定按钮
			filterFlag.value === '1' ? getDataList(data2) : getDataList(data);
		} else {
			loadMore.status = 'no-more';
		}
	});
	/**
	 * pullDownRefresh 下拉刷新事件
	 */
	const loading = ref(null);
	onPullDownRefresh(async () => {
		loading.value = true;
		uni.showLoading({
			title: '正在刷新...',
			mask: true,
			fail: () => {
				uni.hideLoading();
			},
		});

		setTimeout(function () {
			//此处延时器不能清除，否则会导致下拉之后，下拉icon永远停留在页面
			//无法再次下拉
			uni.stopPullDownRefresh();
			loading.value = false;
			uni.hideLoading();
		}, 800);
		//1：直接下拉查询 2：根据输入框搜索按钮查询结果下拉
		let data = {
			pageNumber: 1,
			pageSize: 20,
		};
		let data2 = {
			pageNumber: 1,
			pageSize: 20,
			special: false,
			publicNewSelection: false,
			styles: filterData.value.styleType,
			genders: filterData.value.genderList,
			festivals: filterData.value.holidayTheme,
			hues: filterData.value.colorSystem,
			printTypes: filterData.value.fabricSize,
		};
		// 直接下拉查询，还是点击了筛选面板中的确定按钮
		filterFlag.value === '1' ? getDataList(data2) : getDataList(data);
	});
	/**
	 * 页面初始化
	 */
	const initPage = () => {
		// 经产品经理沟通，确定试用用户只能查看50条数据
		const userInfo = computed(() => sheep.$store('user').userInfo);
		if (userInfo.value.roleType === 21) {
			isShowTouristFlag.value = true;
			getTouristDataList(); //试用用户
		} else {
			isShowTouristFlag.value = false;
			filterFlag.value = '0';
			pageIndex.value = 1;
			let data = {
				pageNumber: pageIndex.value,
				pageSize: 20,
				special: false,
				publicNewSelection: false,
				styles: filterData.value.styleType,
				genders: filterData.value.genderList,
				festivals: filterData.value.holidayTheme,
				hues: filterData.value.colorSystem,
				printTypes: filterData.value.fabricSize,
			};
			getDataList(data); //正式用户
		}
	};
	/**
	 * 抽屉状态更新
	 */
	const changeDrawer = (val) => {
		let idRef = document.getElementById('app');
		if (val) {
			uni.hideTabBar();
			idRef.style.overflow = 'hidden';
			navBarFixed.value = false;
		} else {
			uni.showTabBar();
			idRef.style.overflow = 'visible';
			navBarFixed.value = true;
		}
	};
</script>

<style scoped lang="scss">
	.scroll {
		:deep(.uni-scroll-view > .uni-scroll-view) {
			overflow: visible !important;
		}
	}
	// height: calc(100vh - 270rpx);
	.show-content {
		padding: 0 32rpx;
		.show-top-list {
			display: flex;
			justify-content: space-around;
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			// top: 100rpx;
			background-color: #eef0f2;
			.logo-info {
				width: 170rpx;
				height: 54rpx;
			}
			.right-form-info {
				flex: 1;
				padding-left: 16rpx;
			}
		}
		.show-swiper {
			padding-top: 130rpx;
			height: 260rpx;

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				box-shadow: 0px 50rpx 30rpx -50rpx rgba(17, 17, 17, 0.15);
				border-radius: 16rpx;
			}
		}

		.show-quick-menu {
			height: 160rpx;
			margin-top: 16rpx;
			display: flex;
			justify-content: space-between;

			.item-menu-detial {
				width: 336rpx;
				background: linear-gradient(180deg, #ffffff 0%, #faf0e0 100%);
				box-shadow: 0px 50rpx 30rpx -50rpx rgba(17, 17, 17, 0.15);
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.menu-title {
					width: 134rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #111111;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}

				.menu-icon {
					width: 118rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						width: 118rpx;
						height: 118rpx;
					}
				}
			}
		}

		.online-product-selection {
			width: 716rpx;
			padding: 32rpx 0 20rpx 0;
			display: flex;
			justify-content: space-between;
			background-color: #eef0f2;
			position: sticky;
			.selection-title {
				flex: 1;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #111111;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.filter-command {
				width: 132rpx;
				height: 52rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.filter-active {
				background: #ff6c01;
			}
		}

		.goods-container-list {
			margin-top: -32rpx;
		}
	}
</style>
